<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
        <el-button type="primary" style="float: right;" size="small" @click="showAdd">添加</el-button>
      </div>
      <el-dialog
        :title="addOrWrite?'添加责任单位':'编辑责任单位'"
        center
        :close-on-click-modal="false"
        :visible.sync="showAddFormdialog"
        width="420px"
        @close="cancelForm('taskRef')"
      >
        <el-form ref="taskRef" :model="taskForm" :rules="taskrules" label-width="60px">
          <el-form-item label="类别" prop="name">
            <el-select
              v-model="taskForm.departmentTypeId"
              placeholder="请选择"
              style="width:300px"
              @change="changeSelsct"
            >
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="责任单位" prop="name">
            <el-input type="textarea" v-model="taskForm.name" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm('taskRef',options)">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            border
            :header-cell-style="{background:'#f5f5f5'}"
            :data="tableData"
            style="width: 100%"
             height="680px"
          >
            <el-table-column prop="departmentTypeName" label="类别"></el-table-column>
            <el-table-column prop="name" label="责任单位"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="showAddWrite(scope.row)">编辑</el-button>
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      showAddFormdialog: false,
      formData: "",
      addOrWrite: true,
      options: [],
      value: "",
      taskForm: {
        departmentTypeId: "",
        departmentTypeName: "",
        name: "",
        id: "",
      },
      taskrules: {
        name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    getData() {
      this.$axios
        .post("dept/getList")
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
            console.log(this.tableData);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            this.options = res.data;
            console.log(this.options);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeSelsct(data) {
      // console.log(data)
      this.taskForm.departmentTypeId = data;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            departmentTypeId: this.taskForm.departmentTypeId,
            name: this.taskForm.name,
          };
          if (this.taskForm.id) {
            obj.id = this.taskForm.id;
            this.updataTask(obj);
          } else {
            this.addTask(obj);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addTask(data) {
      this.$axios
        .post("dept/add", data, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.showAddFormdialog = false;
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    updataTask(data) {
      this.$axios
        .post("dept/update", data, 2)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            this.showAddFormdialog = false;
            this.getData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showAdd() {
      this.showAddFormdialog = true;
      this.addOrWrite = true;
    },
    showAddWrite(data) {
      console.log(data);
      this.showAddFormdialog = true;
      this.addOrWrite = false;
      this.taskForm.id = data.id;
      this.taskForm.name = data.name;
      this.taskForm.departmentTypeId = data.departmentTypeId;
    },
    cancelForm(formName) {
      this.taskForm = {
        departmentTypeId: "",
        departmentTypeName: "",
        name: "",
        id: "",
      };
      this.$refs[formName].resetFields();
    },
    del(data) {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("dept/remove", { id: data.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((e) => e);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style scoped>
.userIntSize {
  width: 80% !important;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
</style>
